<template>
  <div>
    <div class="condition">
      <div style="float: left;margin-left:10px;margin-right:6px;padding-top:6px;font-size:12px;">时间:</div>
      <el-date-picker
        v-model="value1"
        type="daterange"
        size= "mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" size= "mini" plain style="margin-left:10px;" @click="query()">查询</el-button>
    </div>
    <div class="content-left">
      <div id="chart" style="width:100%;height:300px;"></div>
      <el-row :gutter="24">
        <el-col :offset="10">入组比例</el-col>
      </el-row>
    </div>
    <div class="content-right">
      <el-table
        :data="tableData"
        border
        size = "mini"
        style="width: 80%">
        <el-table-column
          prop="deptName"
          label="科室"
          width="120">
        </el-table-column>
        <el-table-column
          prop="empName"
          label="医生"
          width="100">
        </el-table-column>
        <el-table-column
          prop="drgs"
          label="DRG">
        </el-table-column>
        <el-table-column
          prop="drgFee"
          label="标准费用">
        </el-table-column>
        <el-table-column
          prop="fee"
          label="实际费用">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="收益">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss">
.condition {
  padding-left: 16px;
  padding-top: 28px;
  text-align: left;
  height: 56px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.content-left {
  float: left;
  width: 30%;
  padding-top: 20px;
}
.content-right {
  float: left;
  width: 70%;
  padding-top: 20px;
}
</style>

<script>
import moment from 'moment'
import { drgsIncome } from '../../api/page-medical-record'

export default {
  data () {
    return {
      value1: [moment().subtract(30, 'days'), new Date()],
      tableData: [
      ],
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: '入组比例',
          type: 'gauge',
          detail: {
            formatter: '{value}'
          },
          data: [{
            value: 0,
            name: '入组比例'
          }]
        }]
      }
    }
  },
  methods: {
    query () {
      const that = this
      drgsIncome({
        dateStart: moment(this.value1[0]).format('yyyy-MM-DD'),
        dateEnd: moment(this.value1[1]).format('yyyy-MM-DD' + ' 23:59:59')
      }).then(res => {
        that.tableData = res.income
        this.option.series[0].data[0].value = res.rate
        const chart = this.$echarts.init(document.getElementById('chart'))
        chart.clear()
        chart.setOption(this.option)
      })
    }
  },
  mounted () {
    const chart = this.$echarts.init(document.getElementById('chart'))
    chart.setOption(this.option)
  }
}
</script>
